<template>
  <div class="valine-wrapper">
    <el-card
      shadow="hover"
      :body-style="{ padding: '20px' }"
    >
      <div class="article">
        <!-- iframe不靠谱，终究还是复制过来了啊啊啊啊啊啊啊啊啊啊 -->
        <Article></Article>
      </div>
      <div class="content">
        <div class="desc">
          <h2>说明:</h2>
          <p>大家有什么问题，可以在下面留言!</p>
        </div>
        <div id="vcomments"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import Valine from 'valine'
import Article from './article'
export default {
  components: {
    Article
  },
  name: 'Valine',
  mounted: function () {
    Valine({
      el: '#vcomments',
      appId: 'your appId',
      appKey: 'your appKey',
      recordIP: true,
      enableQQ: true,
      avatar: 'monsterid'
    })
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  .desc {
    p {
      border-bottom: 2px solid #ccc;
    }
  }
}
@media only screen and (min-width: 1400px) {
  .content {
    max-width: 1024px;
  }
}
@media only screen and (min-width: 1800px) {
  .content {
    max-width: 1200px;
  }
}
</style>
